<template>
  <div>
    <van-cell title="优惠卡审核" size="large" />
    <div class="img_outer" v-if="verify_image">
      <van-image width="200" height="200" :src="verify_image">
        <template v-slot:loading>
          <van-icon name="qr-invalid" size="5rem" />
        </template>
      </van-image>
    </div>
    <van-form @submit="onSubmit" v-else>
      <van-field
        v-model="form.card_name"
        name="card_name"
        label="优惠卡名"
        placeholder="优惠卡名"
        readonly
      />
      <van-field
        v-model="form.amount"
        name="amount"
        label="面值"
        placeholder="会员卡面值"
        readonly
      />
      <van-field
        v-model="form.comment"
        name="comment"
        label="使用说明"
        placeholder="使用说明"
        :rules="[{ required: true, message: '请填写使用说明' }]"
      />
      <van-field
        v-model="form.discount"
        name="discount"
        label="折扣率"
        placeholder="折扣率"
        @input="form.discount = form.discount.replace(/[^\d]/g, '')"
        :rules="[{ required: true, validator, message: '请填写正确的折扣率' }]"
      >
        <template #button>
          <van-button size="small">%</van-button>
        </template>
      </van-field>
      <div style="margin: 32px 96px">
        <van-button round block type="info" native-type="submit"
          >生产审核二维码</van-button
        >
      </div>
    </van-form>
    <div style="margin: 32px 96px" v-if="verify_image">
      <van-button plain round block type="primary" size="small"  @click="goBack">返回</van-button>
    </div>
  </div>
</template>

<script>
import { Base64 } from "js-base64";
import { show_qrcode } from "@/api/wechat";
import { getWxCardById } from "@/api/card";

export default {
  name: "VerifyAction",
  components: {},

  props: ["retailer_id", "card_id"],
  data() {
    return {
      title: this.$route.meta.title,
      verify_image: null,
      form: {
        card: this.card_id,
        card_name: null,
        amount: null,
        comment: null,
        discount: null,
      },
    };
  },
  mounted() {
    this.getCardById();
  },
  methods: {
    validator(val) {
      return val <= 100;
    },

    goBack() {
      this.$router.push({
        name: "Verify",
        params: { retailer_id: this.retailer_id },
      });
    },
    getCardById() {
      getWxCardById(this.card_id)
        .then((res) => {
          console.log(res);
          this.form.card = res.data.id;
          this.form.card_name = res.data.name;
          this.form.amount = res.data.amount;
          this.form.comment = res.data.comment;
        })
        .catch((error) => {
          this.$toast("读取卡信息失败!" + error);
        });
    },
    onSubmit(values) {
      values["card_id"] = this.card_id;
      this.getQrCode(values);
    },
    getQrCode(values) {
      const pid = localStorage.getItem("openid");
      const base64_pid = Base64.encode(pid);
      const base64_comment = Base64.encode(values["comment"]);
      const url = `http://${window.location.host}/#/retailer/${values["card_id"]}/verify?discount=${values["discount"]}&comment=${base64_comment}&pid=${base64_pid}`;
      const params = {
        url: url,
      };
      show_qrcode(params)
        .then((res) => {
          return (
            "data:image/png;base64," +
            btoa(
              new Uint8Array(res.data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            )
          );
        })
        .then((data) => {
          this.verify_image = data;
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>